<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="完善收货信息" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<view class="u-page">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item class="item-integral" v-for="(item, index) in indexList" :key="index">
						<u-cell>

							<div slot="title" id="address-item">

								<div style="display: flex;align-items: center;">

									<label for="checkbox-id" class="checkbox-label">
										<input type="checkbox" id="checkbox-id" class="checkbox-input" />
										<span class="checkbox-style"></span>
									</label>

									<div id="address-item-item">
										<p id="name-mobile">王先生 13121345567</p>
										<p id="address">重庆市江北区建新北路38号3幢23-2</p>
									</div>
								</div>


								<span id="edit">
									编辑
								</span>

							</div>

						</u-cell>
					</u-list-item>
				</u-list>

			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 10; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			},

		},
	}
</script>

<style lang="scss">
	p {
		padding: 0;
		margin: 0;
	}

	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: rgb(242, 242, 242);
		position: fixed;
		top: 90rpx;

	}

	.item-integral {
		background-color: rgb(255, 255, 255);
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.checkbox-input {
		display: none;
		/* 隐藏原生的checkbox */
	}

	.checkbox-style {
		display: inline-block;
		width: 48rpx;
		/* 设置图片的宽度 */
		height: 48rpx;
		/* 设置图片的高度 */
		background-image: url('../../../static/icon/ic_uncheck.jpg');
		/* 默认未选中状态的图片 */
		background-size: cover;
		/* 背景图片覆盖整个元素 */
	}

	.checkbox-input:checked+.checkbox-style {
		background-image: url('../../../static/icon/ic_checked.jpg');
		/* 选中状态下的图片 */
	}

	.checkbox-label {
		cursor: pointer;
		/* 让标签具有指针光标，点击时更明显 */
	}


	#address-item-item {
		margin-left: 18rpx;
	}

	#edit {

		color: #a7a7a7;
		font-size: 28rpx;
	}

	#address-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#name-mobile {
		color: #333333;
		font-size: 28rpx;
	}

	#address {
		color: #696969;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>